<template>
	<view>        <view class="status-bar"></view>        <view class="top-box" :style="{height: heights}">        	<view class="back-box" v-if="!titleIfLeft">        		<image v-if="backStatus" @click="back()" class="back" src="../../static/back-black.png" mode="widthFix"></image>        	</view>        	<view class="back-box" :class="{ titCenter: !titleIfLeft }" style="width: 55%;">{{ title }}</view>        	<view class="back-box">                <view v-if="ifRightBtn" @click="rightEvent">{{ rightText }}</view>        	</view>        </view>    </view>
</template>

<script>
	export default {
		name:"em-top",
		props: {
		    //页面标题
		    title: {
		        type: String,
		        default: '人才社会服务',
		    },
			backStatus: {
				type: Boolean,
				default: true,
			},
			toPath: {
				type: String,
				default: '',
			},
			heights: {
				type: String,
				default: '88rpx',
			},            rightText: {                type: String,                default: '清除已读',            },            ifRightBtn: {                type: Boolean,                default: false,            },            titleIfLeft: {                type: Boolean,                default: false,            }
		},
		data() {
			return {
				
			};
		},
		methods: {
		    back() {
				if (this.toPath != '') {
					uni.navigateTo({
						url: this.toPath,
						fail: (err) => {
							uni.switchTab({
								url: this.toPath,
							})
						}
					})
				} else {
					uni.navigateBack()
				}
		    },            rightEvent() {                this.$emit('rightEvent')            }
		}
	}
</script>

<style lang="scss">
.top-box{
	color: #000;
	font-size: 32rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;    padding: 0 20rpx;    padding-left: 30rpx;
	.back-box{
		width: 22%;
		height: 44rpx;
		.back{
			width: 44rpx;
		}        view {            text-align: right;        }
	}
}.titCenter {    text-align: center;}
</style>